<template>
	<view class="master-team">
		<view class="master-team-title">
			<image src="/static/images/title-icon.png"></image>
			金牌团队
			<image src="/static/images/title-icon.png"></image>
		</view>
		<view class="master-team-sub-title">
			用心服务 专业团队
		</view>
		<view class="master-grid">
			<block v-for="item3 in displayList" :key="item3.id">
				<view class="master_worker_item"
					@click.stop="goPage(`/bundle/pages/master_worker_detail/index?id=${item3.id}`)">
					<u-image style="width: 100%;height: 100%;" :src="item3.image" width="100%" height="100%"></u-image>
					<view class="master_worker_item--text">
						{{ item3.name }}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue';

	const props = defineProps({
		lists: {
			type: Array,
			default: []
		}
	})

	const displayList = computed(() => {
		return props.lists.slice(0, 4)
	})

	const goPage = (url : string) => {
		uni.navigateTo({ url: url })
	}
</script>

<style lang="scss">
	.master-team {
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.master-team-title {
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 500;
		font-size: 36rpx;
		color: #303133;
		text-align: center;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24rpx;
		image {
			width: 12rpx;
			height: 28rpx;
		}
	}

	.master-team-sub-title {
		margin-top: 15px;
		margin-bottom: 31rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 24rpx;
		color: #909399;
		text-align: left;
		font-style: normal;
		text-transform: none;
		text-align: center;
	}

	.master-grid {
		display: grid;
		grid-template-columns: 341rpx 341rpx;
		grid-auto-rows: 436rpx 436rpx;
		gap: 20rpx;
		justify-content: center;
	}

	.master_worker_item {
		width: 100%;
		height: 100%;
		min-height: 0;
		min-width: 0;
		overflow: hidden;
		position: relative;
		border-radius: 20rpx;
		background-color: white;


		&--text {
			position: absolute;
			left: 50%;
			bottom: 28rpx;
			transform: translateX(-50%);
			background-color: rgba(254, 189, 35, 0.3);
			border-radius: 5rpx;
			width: 183rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 26rpx;
		}
	}
</style>